<script setup lang="ts">
// import {onMounted, ref} from "vue";
// let right=ref()
// onMounted(()=>{
//
//  return  function colors(){
//         right.value.color='#38A0FB'
//     }
// })
// let blue=''
// function change(){
//     blue='blue'
// }

// 接收父组件传过来的教师详情数组、
import router from "@/router";

const props = defineProps({
        teacherInfo: {
            type: [Object, String]
        }
    }
)

const toReservation =function (){
    router.push('/makeAppointment')
}

</script>

<template>
    <div class="section">
        <div class="profession">
            <div class="top">
                <div class="line"></div>
                <h3>专业擅长</h3>
            </div>
            <van-divider
                    :style="{ color: '#d0d0d2', borderColor: '#d0d0d2',margin:'0' }"
            ></van-divider>
            <p>{{props.teacherInfo.profession}}</p>
        </div>

        <div class="position">
            <div class="top">
                <div class="line"></div>
                <h3>办公室位置</h3>
            </div>
            <van-divider
                :style="{ color: '#d0d0d2', borderColor: '#d0d0d2',margin:'0' }"
            ></van-divider>
            <p>{{props.teacherInfo.location}}</p>
        </div>

        <div class="phone">
            <div class="top">
                <div class="line"></div>
                <h3>办公电话</h3>
            </div>
            <van-divider
                :style="{ color: '#d0d0d2', borderColor: '#d0d0d2',margin:'0' }"
            ></van-divider>
            <p style="color: #38A0FB">{{props.teacherInfo.phone}}</p>
        </div>

        <div class="about">
            <div class="top">
                <div class="line"></div>
                <h3>老师介绍</h3>
            </div>
            <van-divider
                :style="{ color: '#d0d0d2', borderColor: '#d0d0d2',margin:'0' }"
            ></van-divider>
            <p>{{props.teacherInfo.infos}}</p>
        </div>

        <div class="require">
            <div class="top">
                <div class="line"></div>
                <h3>预约须知</h3>
            </div>
            <van-divider
                :style="{ color: '#d0d0d2', borderColor: '#d0d0d2',margin:'0' }"
            ></van-divider>
            <p>1.预约后请同学提前候场</p>
            <p>2.咨询地址和联系方式请到个人中心——我的咨询中进行查看</p>
            <p>3.如果需要取消预约请提前24小时进行操作，多次出现爽约的情况将会被封禁账号</p>
            <p>4.咨询结束后及时提交评价反馈</p>
        </div>
    </div>
<div class="footer">
    <div class="btn" @click="toReservation">预约咨询</div>
    <div class="read">
       <div><input type="checkbox" name="" id=""><span style="color: #38A0FB"><router-link to="/agree">《预约协议》</router-link></span>，勾选代表已同意</div>
    </div>
</div>

</template>F0F0F1

<style scoped lang="less">
.section {
  margin: 8vh auto 3vh;
  width: 94%;
.position ,.phone,.about,.require{
    margin-top: 2vh;
}
  .profession,.position,.phone ,.about,.require{
    background-color: white;
    width: 100%;
    border-radius: 10px;

    .top {
      display: flex;
      justify-content: left;
      padding: 12px 8px 0;

      .line {
        margin: 2px 5px;
        height: 2vh;
        width: 0;
        //background-color: #38A0FB;
        border: 2px solid #CEAFF8;
      }

      h3 {
        margin-top: 0;
      }
    }

    p {
      margin: 0;
      padding: 15px 16px;
    }
  }
}
.footer {
    width: 94%;
    margin: 0 auto 3vh
;
    .btn {
        margin-bottom: 5px;
        text-align: center;
        color: white;
        font-size: 17px;
        padding: 10px;
        background-color: #9E75F5;
        border-radius: 5px;
    }
    .read {
        text-align: center;

    }
}

</style>